<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>知识库详情</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/assets/common/libs/layui/css/layui.css" media="all">
  <style>
    /* 自定义样式 */
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }

    .layui-container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .page-header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px 0;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .page-header h2 {
      color: #333;
      font-size: 24px;
      margin: 0;
      font-weight: 500;
    }

    .detail-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      margin-bottom: 30px;
    }

    .detail-card-header {
      background-color: #1e9fff;
      color: #fff;
      padding: 15px 20px;
      font-size: 18px;
      font-weight: 500;
    }

    .detail-card-body {
      padding: 25px;
    }

    .form-group {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
    }

    .form-group:last-child {
      margin-bottom: 0;
    }

    .form-label {
      width: 100px;
      font-weight: 500;
      color: #666;
      padding-top: 8px;
      flex-shrink: 0;
    }

    .form-value {
      flex: 1;
      color: #333;
    }

    .detail-title {
      font-size: 18px;
      font-weight: 500;
      color: #1e9fff;
      margin-bottom: 5px;
    }

    .detail-content {
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      padding: 20px;
      min-height: 300px;
      background-color: #fafafa;
      line-height: 1.8;
      color: #333;
    }

    .detail-content p {
      margin-bottom: 10px;
    }

    .detail-content img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      margin: 10px 0;
    }

    .detail-meta {
      color: #999;
      font-size: 14px;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
    }

    .meta-item {
      margin-right: 20px;
    }

    .btn-group {
      text-align: center;
      margin-top: 30px;
    }

    .layui-btn {
      border-radius: 4px;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      transition: all 0.3s;
    }

    .layui-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 40px;
      height: 40px;
      background-color: #1e9fff;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s;
      z-index: 9999;
      box-shadow: 0 2px 10px rgba(30, 159, 255, 0.4);
    }

    .back-to-top.show {
      opacity: 1;
    }

    .back-to-top:hover {
      background-color: #4aaefe;
      transform: translateY(-2px);
    }
  </style>
</head>

<body>
  <!-- 返回顶部按钮 -->
  <div class="back-to-top" id="backToTop">↑</div>

  <div class="layui-container">
    <div class="page-header">
      <h2>知识库详情</h2>
    </div>

    <div class="detail-card">
      <div class="detail-card-header">详情信息</div>
      <div class="detail-card-body">
        <div class="form-group">
          <div class="form-label">标题</div>
          <div class="form-value">
            <div class="detail-title" id="detailTitle"></div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-label">内容</div>
          <div class="form-value">
            <div class="detail-content" id="detailContent"></div>
          </div>
        </div>

        <div class="detail-meta">
          <span class="meta-item">创建时间: <span id="detailCreateTime"></span></span>
          <span class="meta-item">更新时间: <span id="detailUpdateTime"></span></span>
        </div>
      </div>
    </div>

    <div class="btn-group">
      <button type="button" class="layui-btn layui-btn-primary" id="backBtn">返回列表</button>
    </div>
  </div>

  <script src="/assets/common/libs/layui/layui.js" charset="utf-8"></script>
  <script>
    layui.use(['jquery', 'layer'], function () {
      var $ = layui.jquery;
      var layer = layui.layer;

      // 获取URL中的ID参数
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      }

      // 页面加载时获取详情数据
      $(function () {
        // 正确获取ID：优先从URL参数获取，其次从model获取
        var id = getUrlParam('id') || '${id}';

        // 如果id是字符串'${id}'（表示没有从model获取到值），则将其设为null
        if (id === '${id}') {
          id = null;
        }

        if (id) {
          // 显示加载状态
          var index = layer.load(1, { shade: [0.1, '#fff'] });

          $.ajax({
            url: '/knowledgeBase/detail',
            type: 'get',
            data: { id: id },
            success: function (res) {
              layer.close(index);
              if (res.code === 0 && res.data) {
                var knowledgeBase = res.data;
                $('#detailTitle').text(knowledgeBase.title);
                $('#detailContent').html(knowledgeBase.content);
                $('#detailCreateTime').text(knowledgeBase.createTime);
                $('#detailUpdateTime').text(knowledgeBase.updateTime || knowledgeBase.createTime);
              } else {
                layer.msg('获取详情失败: ' + (res.message || '未知错误'));
              }
            },
            error: function () {
              layer.close(index);
              layer.msg('网络错误，请稍后重试');
            }
          });
        }
      });

      // 返回按钮点击事件
      $('#backBtn').click(function () {
        window.location.href = '/knowledgeBase';
      });
    });
  </script>
</body>

</html>